<template>
    <div id="bar-chart-main"></div>
</template>

<script>
    import * as echarts from 'echarts';

    export default {
        name: "BarChart",
        mounted() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('bar-chart-main'));
            // 绘制图表
            myChart.setOption({
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    textStyle: {
                        color: '#fff'
                    },
                    left:0,
                    top:15,
                    data: ['设备数量']
                },
                xAxis: [
                    {
                        type: 'category',
                        data: ['1区', '2区', '3区', '4区', '5区', '6区', '7区'],
                        axisPointer: {
                            type: 'shadow'
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#fff'
                            }
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#1e9eff'
                            }
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'category',
                        axisLabel: {
                            textStyle: {
                                color: '#fff'
                            },
                            formatter: function (num) {
                                return num >= 1e3 && num < 1e4 ? (num / 1e3).toFixed(1) + 'k' : num >= 1e4 ? (num / 1e4).toFixed(1) + 'w' : num
                            }
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#1e9eff'
                            },
                        }
                    }
                ],
                series: [
                    {
                        name: '设备数量',
                        type: 'bar',
                        data: [
                            0,1000,2000,2500,3000,4000,4500,5000
                        ],
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    { offset: 0, color: "#21a3ff" },
                                    { offset: 0.5, color: "#128cff" },
                                    { offset: 1, color: "#016fff" }
                                ])
                            }
                        }
                    }
                ]
            })
        }
    }
</script>

<style scoped>

</style>
